import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import { NavBar } from "antd-mobile";
import { ProductCard } from "react-vant";
import { Tabs, Card, Radio, Stepper } from "antd-mobile";
import "./index.css";
const curdate = dayjs();
const curMonth = curdate.format("M月");
const curDay = curdate.date();
const curMonthDatas = curdate.daysInMonth();

// console.log(curMonthDatas)
const MonthDates = Array.from({ length: curMonthDatas }).map((_, index) => {
  return {
    month: curMonth,
    date: index + 1,
    iscurdate: index + 1 === curDay,
  };
});
function Index() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state);
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>购票</NavBar>

      <div>
        <Tabs defaultActiveKey={curDay - 1}>
          {MonthDates.map((item, ind) => (
            <Tabs
              key={ind}
              title={
                <div>
                  <p>{item.month}</p>
                  <sapn>{item.date}</sapn>
                </div>
              }
            ></Tabs>
          ))}
        </Tabs>
      </div>

      <Card title="选择你的票">
        <Radio.Group defaultValue="1">
          <Card title="Vip参观票" extra={<Radio value="1"></Radio>}>
            <ProductCard
              price={state.price}
              desc={state.date}
              title={state.title}
              thumb={state.image}
            />

            <div className="order_worp">
              <span style={{color:"orange"}}>显示票价明细</span>
              <Stepper min={0} max={5} />
            </div>
          </Card>
          <Card title="普通参观票" extra={<Radio value="2"></Radio>}>
            <ProductCard
              price={state.price}
              desc={state.date}
              title={state.title}
              thumb={state.image}
            />

            <div className="order_worp">
              <span style={{color:"orange"}}>显示票价明细</span>
              <Stepper min={0} max={5} />
            </div>
          </Card>
        </Radio.Group>
      </Card>


      <div className="orrder_footer">
        <span>￥{state.price}</span>
        <div className="order_btn">继续</div>
      </div>
    </div>
  );
}

export default Index;
